{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="本地有约 - 发现身边有趣的活动，结识志同道合的朋友">
    <title>{% block title %}本地有约 - 发现身边有趣的活动{% endblock %}</title>
    
    <!-- Bootstrap CSS -->
    <link href="{% static 'bootstrap-5.3.8/css/bootstrap.min.css' %}" rel="stylesheet">
    
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Custom CSS -->
    <link href="{% static 'css/style.css' %}" rel="stylesheet">
    
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-custom sticky-top">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fas fa-calendar-alt"></i>
                本地有约
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link {% if request.resolver_match.url_name == 'home' %}active{% endif %}" href="/">
                            <i class="fas fa-home"></i> 首页
                        </a>
                    </li>
                    {% if user.is_authenticated %}
                    <li class="nav-item">
                        <a class="nav-link {% if 'checkin' in request.path %}active{% endif %}" href="{% url 'points:checkin' %}">
                            <i class="fas fa-calendar-check text-warning"></i> 签到
                        </a>
                    </li>
                    {% endif %}
                    <li class="nav-item">
                    <a class="nav-link {% if 'activities' in request.path and 'map' not in request.path %}active{% endif %}" href="{% url 'activities:list' %}">
                        <i class="fas fa-calendar-alt"></i> 活动
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if 'map' in request.path %}active{% endif %}" href="{% url 'activities:map_view' %}">
                        <i class="fas fa-map-marked-alt"></i> 地图找活动
                    </a>
                </li>
                    <li class="nav-item">
                        <a class="nav-link {% if 'points' in request.path %}active{% endif %}" href="{% url 'points:shop' %}">
                            <i class="fas fa-gift"></i> 积分商城
                        </a>
                    </li>
                    
                    {% if user.is_authenticated %}
                    <!-- 已登录用户 -->
                    <li class="nav-item">
                        <a class="nav-link notification-badge" href="{% url 'notifications:list' %}">
                            <i class="fas fa-bell"></i>
                            <span class="badge" id="notification-count" style="display: none;">0</span>
                        </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                            <img src="{% if user.avatar %}{{ user.avatar.url }}{% else %}/static/img/default-avatar.png{% endif %}" alt="头像" class="user-avatar" id="navbarAvatar">
                            {{ user.nickname|default:user.username }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="{% url 'users:profile' user.id %}">
                                <i class="fas fa-user"></i> 个人中心
                            </a></li>
                            <li><a class="dropdown-item" href="{% url 'activities:my_activities' %}">
                                <i class="fas fa-list"></i> 我的活动
                            </a></li>
                            <li><a class="dropdown-item" href="{% url 'points:records' %}">
                                <i class="fas fa-coins"></i> 我的积分
                            </a></li>
                            <li><a class="dropdown-item" href="{% url 'users:settings' %}">
                                <i class="fas fa-cog"></i> 设置
                            </a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{% url 'users:logout' %}">
                                <i class="fas fa-sign-out-alt"></i> 退出登录
                            </a></li>
                        </ul>
                    </li>
                    {% else %}

                    <!-- 未登录用户 -->
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'users:login' %}">
                            <i class="fas fa-sign-in-alt"></i> 登录
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="btn btn-gradient-primary ms-2" href="{% url 'users:register' %}">
                            注册
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main>
        {% block content %}{% endblock %}
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-3">
                    <h5><i class="fas fa-calendar-alt"></i> 本地有约</h5>
                    <p class="text-muted">发现身边有趣的活动<br>结识志同道合的朋友</p>
                </div>
                <div class="col-md-4 mb-3">
                    <h6>快速链接</h6>
                    <ul class="list-unstyled">
                        <li><a href="/about/" class="text-muted text-decoration-none">关于我们</a></li>
                        <li><a href="/help/" class="text-muted text-decoration-none">帮助中心</a></li>
                        <li><a href="/contact/" class="text-muted text-decoration-none">联系我们</a></li>
                    </ul>
                </div>
                <div class="col-md-4 mb-3">
                    <h6>关注我们</h6>
                    <div class="social-links">
                        <a href="#" class="text-white me-3"><i class="fab fa-weixin fa-2x"></i></a>
                        <a href="#" class="text-white me-3"><i class="fab fa-weibo fa-2x"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-qq fa-2x"></i></a>
                    </div>
                </div>
            </div>
            <hr class="border-secondary">
            <div class="text-center text-muted">
                <small>&copy; 2024 本地有约. All rights reserved.</small>
            </div>
        </div>
    </footer>

    <!-- 全局加载器 -->
    <div id="global-loader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 9999; align-items: center; justify-content: center;">
        <div class="spinner-border text-light" role="status" style="width: 3rem; height: 3rem;">
            <span class="visually-hidden">加载中...</span>
        </div>
    </div>

    <!-- Toast 容器 -->
    <div id="toast-container"></div>

    <!-- Bootstrap JS -->
    <script src="{% static 'bootstrap-5.3.8/js/bootstrap.bundle.min.js' %}"></script>
    
    <!-- Axios -->
    <script src="{% static 'js/axios.min.js' %}"></script>
    
    <!-- API 封装 -->
    <script src="{% static 'js/api.js' %}"></script>
    
    <!-- 全局脚本 -->
    <script>
        // 初始化提示工具
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化所有 tooltips
            const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
            
            {% if user.is_authenticated %}
            // 获取未读通知数量
            API.notifications.getUnreadCount()
                .then(response => {
                    const count = response.data.count;
                    if (count > 0) {
                        const badge = document.getElementById('notification-count');
                        badge.textContent = count > 99 ? '99+' : count;
                        badge.style.display = 'block';
                    }
                })
                .catch(error => {
                    console.error('获取未读通知失败:', error);
                });
            {% endif %}
        });
    </script>
    
    {% block extra_js %}{% endblock %}
</body>
</html>
